<div ng-controller="CapOneTemplateController as template">
    <div id="header">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">

                <a ng-href="#/" class="dashboard-logo"></a>

                <h4 title="{{::ctrl.dashboard.title }}">{{::ctrl.dashboard.title | trunText:50}}</h4>

                <div class="pipeline-toggle btn-group">

                    <span class="btn" ng-repeat="tab in template.tabs" ng-click="template.toggleView($index)"
                          ng-class="tab.name == template.widgetView ? 'btn-primary' : 'btn-default'">
                        <span ng-class="tab.name === 'Widget' ? 'fa fa-th' : tab.name === 'Pipeline' ? 'fa fa-task' : 'fa fa-cloud'"></span>
                        {{tab.name}}
                    </span>

                </div>
            </div>
        </nav>
    </div>

    <div class="dashboard-widgets container-fluid" widget-container dashboard="ctrl.dashboard" ng-if="template.widgetView == 'Widget'">
        <div ng-if="ctrl.scoreHeaderEnabled">
            <score-view-header dashboard-id="{{ctrl.dashboard.id}}" rate-it-options="ctrl.scoreRateItOptionsHeader"></score-view-header>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="row">
                    <div class="col-xs-12">
                        <div ng-if="ctrl.scoreWidgetEnabled">
                            <score-view-widget dashboard-id="{{ctrl.dashboard.id}}" rate-it-options="ctrl.scoreRateItOptionsWidget"></score-view-widget>
                        </div>
                        <widget name="feature" widget-title="Feature"></widget>
                        <widget name="repo"></widget>
                        </div>
                </div>
             </div>

            <div class="col-md-6">
                <widget name="build"></widget>
                <div class="container-fluid">
                    <ul class="nav nav-tabs">
                        <li class="text-lg auth-modal-tab" ng-repeat="tab in template.minitabs" ng-click="template.miniToggleView($index)"
                            ng-class="tab.name == template.miniWidgetView ? 'active' : ''">
                            <a class="textColor-Performance" data-toggle="tab" >{{tab.name}}</a>

                        </li>
                        </span>
                    </ul>

                </div>

                <div class="container-fluid" widget-container dashboard="ctrl.dashboard" ng-if="template.miniWidgetView == 'Quality'">
                    <div class="row">
                        <div class="col-xs-12">
                            <widget name="codeanalysis" widget-title="Quality"></widget>
                        </div>
                    </div>
                </div>

                <div class="container-fluid" widget-container dashboard="ctrl.dashboard" ng-if="template.miniWidgetView == 'Performance'">
                    <div class="row">
                        <div class="col-xs-12">
                            <widget name="Performance" widget-title="Performance"></widget>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">

                <div class="row">
                    <div class="col-sm-6 col-md-12">
                        <widget name="Monitor"></widget>
                    </div>

                    <div class="col-sm-6 col-md-12">
                        <widget name="deploy"></widget>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="container-fluid" widget-container dashboard="ctrl.dashboard" ng-if="template.widgetView == 'Pipeline'">
        <div class="row">
            <div class="col-xs-12">
                <widget name="pipeline" widget-title="Delivery Pipeline"></widget>
            </div>
        </div>
    </div>


    <div class="container-fluid" widget-container dashboard="ctrl.dashboard" ng-if="template.widgetView == 'Cloud'">
        <div class="row">
            <div class="col-xs-12">
                <widget name="cloud" widget-title="Cloud"></widget>
            </div>
        </div>
    </div>
</div>
